<template>
  <div class="chat-bottom-container">
    <div class="input-container">
      <div class="input-left" @click="changeInputType">
        <svg-icon icon="keyboard" v-show="inputType === 'audio'"></svg-icon>
        <svg-icon icon="audio" v-show="inputType === 'text'"></svg-icon>
      </div>
      <div
        class="input audio-input"
        v-show="inputType === 'audio'"
        @touchstart="startRecord"
        @touchend="endRecord"
      >
        按住 说话
      </div>
      <DivEditable
        v-model="message"
        class="input"
        ref="input"
        v-show="inputType === 'text'"
        @send="sendText"
      />
      <!-- <input type="text" class="input"> -->
      <van-icon class="icon" name="smile-o" @click="clickEmojiBtn" />
      <van-icon class="icon" name="add-o" v-show="!message" @click="clickFuncBtn" />
      <van-button
        class="btn"
        type="primary"
        size="small"
        v-show="message"
        @click="sendText">
        发送
      </van-button>
    </div>
    <div class="function-container">
      <Emoji v-if="bottomPannel === 'emoji'" @emoji-select="onEmojiSelect" />
      <div class="function" v-show="bottomPannel === 'functions'">
        <div class="function-btn" v-for="item in functions" :key="item.name" @click="item.onClick">
          <div class="btn-icon">
            <van-icon :name="item.icon" size="30px" />
          </div>
          <div class="btn-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <ChatRecorder v-show="showRecorder" @recorder-end="sendAudio" ref="recorder" />
    <input
      type="file"
      style="display:none"
      multiple="multiple"
      ref="image-input"
      accept="image/*"
      @change="getImage"
    />
    <input
      type="file"
      style="display:none"
      multiple="multiple"
      ref="file-input"
      @change="sendFile"
    />
  </div>
</template>

<script>
import Emoji from '@/components/Emoji/Emoji'
import DivEditable from '@/components/DivEditable'
import globalEvent from '@/utils/event'
import ChatRecorder from '@/components/ChatRecorder'

export default {
  name: 'ChatBottom',
  components: { Emoji, DivEditable, ChatRecorder },
  props: {
    contactId: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      message: '',
      bottomPannel: null,
      inputType: 'text',
      showRecorder: false,
      showImgOverlay: false,
      imgsQueue: null,
      functions: [
        {
          icon: 'video',
          name: '视频通话',
          onClick: this.videoCall
        },
        {
          icon: 'phone',
          name: '语音通话',
          onClick: this.audioCall
        },
        {
          icon: 'photo',
          name: '照片',
          onClick: this.photo
        },
        {
          icon: 'card',
          name: '文件',
          onClick: this.file
        }
      ]
    }
  },
  methods: {
    clickFuncBtn() {
      if (this.bottomPannel === 'functions') {
        this.bottomPannel = null
        this.focusInput()
      } else {
        this.bottomPannel = 'functions'
      }
    },
    clickEmojiBtn() {
      this.inputType = 'text'
      if (this.bottomPannel === 'emoji') {
        this.bottomPannel = null
        this.focusInput()
      } else {
        this.bottomPannel = 'emoji'
      }
    },
    focusInput() {
      this.$refs.input.focus()
    },
    onEmojiSelect(val) {
      this.message += val
    },
    changeInputType() {
      if (this.inputType === 'text') {
        this.inputType = 'audio'
      } else {
        this.inputType = 'text'
        this.$nextTick(() => {
          this.focusInput()
        })
      }
    },
    videoCall() {
      globalEvent.emit('videoCall', this.contactId, 'video')
    },
    audioCall() {
      globalEvent.emit('videoCall', this.contactId, 'audio')
    },
    startRecord() {
      this.showRecorder = true
      this.$refs.recorder.recStart()
    },
    endRecord() {
      this.$refs.recorder.recStop()
      this.showRecorder = false
    },
    async sendText() {
      const text = this.message
      this.message = ''
      this.$emit('send-text', text)
    },
    async sendAudio(audio) {
      window.myAudio = audio
      this.$emit('send-audio', audio)
    },
    photo() {
      this.$refs['image-input'].click()
    },
    getImage() {
      const fileInput = this.$refs['image-input']
      // this.showImgOverlay = true
      this.imgsQueue = fileInput.files
      this.sendImage()
    },
    sendImage() {
      this.$emit('send-image', this.imgsQueue)
    },
    file() {
      this.$refs['file-input'].click()
    },
    sendFile() {
      const files = this.$refs['file-input'].files
      console.log('files-----', files)
      this.$emit('send-file', files)
    },
    test() {

    }
  }
}
</script>

<style lang="scss" scoped>
.chat-bottom-container {
      // 解决better-scroll遮挡 .bottom-container的问题
      position: relative;
      z-index: 1;
      .input-container {
        // height: $chat-input-height;
        box-sizing: border-box;
        padding: $padding-side;
        background-color: #f7f7f7;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        border-top: 1px solid #d4d4d4;
        border-bottom: 1px solid #d4d4d4;
        .input {
          min-height: $chat-input-height - 2 * $padding-side;
          max-height: 80px;
          flex: 1;
          padding: 0 5px;
          border: none;
          outline: none;
          overflow: hidden;
          font-size: 16px;
          line-height: $chat-input-height - 2 * $padding-side;
          border-radius: 4px;
          background-color: #fff;
        }
        .audio-input {
          text-align: center;
          @include forbid-select;
        }
        .input-left {
          vertical-align: middle;
          margin-right: 10px;
          font-size: 30px;
          line-height: $chat-input-height - 2 * $padding-side;
        }
        .icon {
          vertical-align: middle;
          margin-left: 10px;
          font-size: 30px;
          line-height: $chat-input-height - 2 * $padding-side;
        }
        .btn {
          margin-left: 10px;
          height: 30px;
          width: 60px;
        }
      }
      .function-container {
        background-color: #f7f7f7;
        .function {
          padding: 20px 0;
          display: flex;
          .function-btn {
            margin-left: 35px;
            .btn-icon {
              width: 50px;
              height: 50px;
              border-radius: 8px;
              background-color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .btn-name {
              text-align: center;
              font-size: $font-size-sm;
              margin-top: 5px;
              color: $gray-6;
            }
          }
        }
      }
    }
</style>
